<template>
  <div class="preview_body">
    <div ref="preview" id="preview" class="preview"></div>
  </div>
</template>
<script setup name="preview_body">
import { onMounted, ref } from 'vue'
import api from '@/plugins/api/index'
import { initViewer, loadModel } from '@/plugins/viewer.js';
let preview = ref(null)


onMounted(async () => {
  // return
  const newUrn = 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YnNjYnVja2V0X3Rlc3QvQlNDLVBFLTAwMDEmMDAwMiUyMC1BJTIwJTVCUGxhbnMlNUQlMjAoMjQxMTA2KXdpdGglMjBUMzMlMjBHcmlkLmR3Zw'
  const rd = await api.getUrnStatus({
    urn: newUrn
  })
  console.log(rd.data.status)
  console.log(rd)
  if (rd.data.status === "success") {
    initViewer(document.getElementById('preview')).then(viewer => {
      const urn = 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YnNjYnVja2V0X3Rlc3QvQlNDLVBFLTAwMDEmMDAwMiUyMC1BJTIwJTVCUGxhbnMlNUQlMjAoMjQxMTA2KXdpdGglMjBUMzMlMjBHcmlkLmR3Zw'
      loadModel(viewer, urn);
    });
  }
})


</script>
<style scoped lang="scss">
.preview_body {
  width: 100%;
  height: 100%;
  position: fixed;
}
.preview {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>